<template>
  <div class="mao-radio-button flex align-center pointer" :class="{disabled:disabled}" @click.stop="toggle">
    <el-button :size="size" :class="checked.toString() === value.toString()?'active':''" :disabled="disabled">
      <slot> {{ label }}</slot>
    </el-button>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: {
      type: [String, Number, Array],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'default'
    },
    value: {
      type: [String, Number, Array],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    toggle() {
      if (!this.disabled) {
        if (typeof this.value !== 'object') {
          this.$emit('change', this.value.toString())
        } else {
          this.$emit('change', this.value)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mao-radio-button{
  // &:last-child{
  //   margin-right:0;
  // }
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
.mao-radio-button {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.disabled{
  cursor:not-allowed;
}
.dark{
  .mao-radio-button{
    color: rgba(255,255,255,0.7);
  }
}
</style>
